Deixe sua opinião sobre qual deve ser o principal investimento ou ação de Santos em mobilidade urbana e regional.
const campo = document.getElementById("edit-submitted-contribuicao");
const limite = 600; // <– defina aqui o limite desejado
// Criar elementos dinamicamente —————————-
const wrapper = document.createElement("div");
wrapper.id = "contador-wrapper";
wrapper.style.marginTop = "5px";
const texto = document.createElement("div");
texto.id = "contador-texto";
texto.style.fontSize = "14px";
texto.style.marginBottom = "4px";
const barraContainer = document.createElement("div");
barraContainer.id = "contador-barra";
barraContainer.style.height = "8px";
barraContainer.style.width = "100%";
barraContainer.style.background = "#e0e0e0";
barraContainer.style.borderRadius = "4px";
barraContainer.style.overflow = "hidden";
const progresso = document.createElement("div");
progresso.id = "contador-progresso";
progresso.style.height = "100%";
progresso.style.width = "0%";
progresso.style.background = "green";
progresso.style.transition = "width 0.2s ease, background 0.3s ease";
// Montar hierarquia
barraContainer.appendChild(progresso);
wrapper.appendChild(texto);
wrapper.appendChild(barraContainer);
// Inserir logo após o campo
campo.parentNode.appendChild(wrapper);
// ———————————————————–
function atualizarContador() {
let usado = campo.value.length;
let restante = limite – usado;
// Impedir ultrapassar limite
if (usado > limite) {
campo.value = campo.value.substring(0, limite);
usado = limite;
restante = 0;
}
texto.textContent = `${usado} / ${limite} caracteres`;
// Porcentagem da barra
let pct = (usado / limite) * 100;
progresso.style.width = pct + "%";
// Mudar cor
if (pct < 60) {
progresso.style.background = "green";
} else if (pct < 85) {
progresso.style.background = "gold";
} else {
progresso.style.background = "red";
}
}
campo.addEventListener("input", atualizarContador);
atualizarContador(); // inicial
});
Fonte: Prefeitura de Santos
